<template>
  <div class="rootApp">
    <div class="topPlugins"></div>
    <div class="features">
      <Toolbar></Toolbar>
      <Canvas></Canvas>
      <DialogEditor></DialogEditor>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import type { Dayjs } from 'dayjs';
  import Toolbar from './Toolbar/index.vue';
  import Canvas from './Canvas/index.vue';
  import DialogEditor from './DialogEditor/index.vue';

  import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
  import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
  import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
  import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
  import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
  // @ts-ignore
  self.MonacoEnvironment = {
    getWorker(_: string, label: string) {
      if (label === 'json') return new jsonWorker();
      if (label === 'css' || label === 'scss' || label === 'less') return new cssWorker();
      if (label === 'html' || label === 'handlebars' || label === 'razor') return new htmlWorker();
      if (['typescript', 'javascript'].includes(label)) return new tsWorker();
      return new EditorWorker();
    },
  }
</script>

<style scoped lang="less">
  .rootApp {
    width: 100vw;
    height: 100vh;
    .topPlugins {
      width: 100%;
      min-height: 40px;
      background-color: #3967FF;
    }
    .features {
      width: 100%;
      height: calc(100% - 40px);
      display: flex;
    }
  }
</style>
